<template>
  <el-row>
    <el-col :span="24">
      <el-card class="search-form">
        <el-form ref="searchForm" class="el-form-col" :model="search">
          <el-row :gutter="15" style="position:relative;">
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderNo" style="position: relative">
                <el-input v-model="search.orderNo" type="textarea" :rows="4" placeholder="订单号  (支持多单查询，用英文逗号分隔)"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="outNo" style="position: relative">
                <el-input v-model="search.outNo" type="textarea" :rows="4" placeholder="推单单号  (支持多单查询，用英文逗号分隔)"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneName">
                <el-input v-model="search.consigneName" placeholder="客户姓名" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consignePhone">
                <el-input v-model="search.consignePhone" placeholder="客户电话" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="addressArr">
                <cascade-address :level="3" changeOnSelect v-model="search.addressArr" placeholder="客户地址:省/市/区"></cascade-address>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="boolStorage">
                <el-select v-model="search.boolStorage" clearable placeholder="是否仓储">
                  <el-option label="否" :value="0"></el-option>
                  <el-option label="是" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="storageType">
                <el-select v-model="search.storageType" clearable filterable placeholder="仓储类型">
                  <el-option v-for="item in storageTypeCodeArr"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 无业务类型
            <el-col :lg="4" :md="6">
              <el-form-item prop="businessNo">
                <el-select v-model="search.businessNo" clearable placeholder="业务类型">
                  <el-option
                    v-for="item in businessArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            -->
            <el-col :lg="4" :md="6">
              <el-form-item prop="serviceCode">
                <el-select v-model="search.serviceCode" clearable placeholder="服务类型">
                  <el-option
                    v-for="item in serviceArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <div v-show="isOpen">
              <el-col :lg="4" :md="6">
                <el-form-item prop="outSourceWarehouse">
                  <el-input v-model="search.outSourceWarehouse" placeholder="推单来源" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="placeUserName">
                  <el-input v-model="search.placeUserName" placeholder="下单人" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="foundStart">
                  <el-date-picker type="date"
                                  placeholder="下单开始日期"
                                  value-format="yyyy-MM-dd"
                                  v-model="search.foundStart" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="foundEnd">
                  <el-date-picker type="date"
                                  placeholder="下单结束日期"
                                  v-model="search.foundEnd"
                                  value-format="yyyy-MM-dd"
                                  :picker-options="{disabledDate}" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-terminal-order/bidding/out-order-list"
        :tabs="tabs"
        @selection-change="selectionChange"
        :columns="columns">
        <template slot="buttons">
          <el-button @click.prevent="submit()" type="primary">批量抛出</el-button>
        </template>
        <template slot="preColumn">
          <el-table-column prop="orderNo" fixed="left" width="155px" align="center" label="订单号">
            <template slot-scope="scope">
              <a href="javascript:;" class="blue-color" @click="show(scope.row)">{{ scope.row.orderNo }}</a>
            </template>
          </el-table-column>
        </template>
        <template slot="column">
          <el-table-column fixed="right" width="100px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="show(scope.row)"
              >
                抛出竞价
              </el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {getOmsBusinessList, getServiceType, getCargoSourceType} from '@/utils/selectOptions'
import {unixTimestampFilter, filterDataBaseDictionary} from '@/filters'
import {copy, alert, confirm, dotData, arrayColumn} from '@/utils'
import {httpSuccessPost} from '@/utils/ajax'
import moment from 'moment'
export default {
  name: 'expatriateOrders',
  data() {
    let columns = [
      {
        label: '是否仓储',
        width: '80px',
        data: 'boolStorage',
        render: (data, type, full, meta) => {
          return data === 1 ? '是' : '否'
        }
      },
      {
        label: '仓储类型',
        width: '100px',
        data: 'storageType',
        render(data, full) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '商家名称',
        data: 'cargoOwner'
      },
      {
        label: '业务类型',
        data: 'businessName'
      },
      {
        label: '服务类型',
        data: 'serviceName'
      },
      {
        label: '到件状态',
        data: 'arriveState',
        render(data, type, full, meta) {
          let num = parseInt(data)
          switch (num) {
            case 0 :
              return '未到件'
            case 1 :
              return '部分到件'
            case 2 :
              return '全部到件'
            default :
              return ''
          }
        }
      },
      {
        label: '订单状态',
        data: 'orderState',
        render(data, type, full, meta) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '客户姓名',
        data: 'consigneName'
      },
      {
        label: '客户电话',
        data: 'consignePhone'
      },
      {
        label: '客服地址',
        data: 'province+city+district',
        render(data, full) {
          return `${full.consigneProvince} ${full.consigneCity} ${full.consigneDistrict}`
        },
        width: 200
      },
      {
        label: '推单来源',
        data: 'outSourceWarehouse',
        render(data, full) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '推单单号',
        data: 'outNo'
      },
      {
        label: '下单人',
        data: 'placeUserName'
      },
      {
        label: '下单时间',
        width: '134px',
        data: 'foundTime',
        render(data, full) {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
        }
      }
    ]
    return {
      state: 0,
      isOpen: false,
      visible: false,
      searchLoading: false,
      storageTypeCodes: [],
      storageTypeCodeArr: [],
      businessArr: [],
      serviceArr: [],
      search: {
        orderNo: '',
        outNo: '',
        consigneName: '',
        consignePhone: '',
        addressArr: [],
        boolStorage: '',
        storageType: '',
        businessNo: '',
        serviceCode: '',
        outSourceWarehouse: '',
        placeUserName: '',
        foundStart: '',
        foundEnd: ''
      },
      columns,
      tabs: [],
      typeArr: [],
      item: {},
      rows: []
    }
  },
  created() {
    // 业务类型
    getOmsBusinessList().then(arr => {
      this.businessArr = arr
    })
    // 服务类型
    getServiceType().then(arr => {
      this.serviceArr = arr
    })
    getCargoSourceType().then(arr => {
      this.storageTypeCodeArr = arr
    })
  },
  methods: {
    selectionChange(rows) {
      this.rows = rows
    },
    disabledDate(time) {
      return time.getTime() < moment(this.search.startTime).format('x')
    },
    // 搜索
    searchFunc(search) {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(search)
        params.consigneProvinceNo = dotData(params, 'addressArr[0]') || ''
        params.consigneCityNo = dotData(params, 'addressArr[1]') || ''
        params.consigneDistrictNo = dotData(params, 'addressArr[2]') || ''
        delete params.addressArr
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },

    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    },
    show(data) {
      this.$router.push({path: '/ss-oms/orders/expatriate/expatriateOrders/show/' + data.orderId})
    },
    submit() {
      if (this.rows.length > 0) {
        confirm(`
          <p>你已选择${this.rows.length}个订单</p>
          <p>确定将该订单抛出竞价</p>
        `, '温馨提示', {
          type: 'warning',
          confirmButtonLoading: true,
          dangerouslyUseHTMLString: true,
          confirmCallBack: ({close, confirmButtonLoadingClose}) => {
            httpSuccessPost('/ms-warehouse-order/recordOrder/saveTempList', arrayColumn(this.rows, 'id')).then(response => {
              const success = dotData(response, 'success')
              if (success) {
                close().then(_ => {
                  confirm(`操作成功`, '温馨提示', {
                    type: 'success'
                  }).finally(_ => {
                    this.refresh()
                  })
                  confirmButtonLoadingClose()
                })
              } else {
                confirmButtonLoadingClose()
              }
            }).catch(_ => {
              confirmButtonLoadingClose()
            })
          }
        })
      } else {
        alert('请选择订单')
      }
    }
  }
}
</script>
